<template>
  <!--工单分类-编辑-->
  <Card class="gdfl-optional-editor page-overflow scroll-bar" style="height:900px">
    <div class="form-column-container">
      <div class="option-item form-column-item">
        <v-optional-editor label="分类代码" labelValue="YED" :type="type==0 && 'input'">
        </v-optional-editor>
      </div>
      <div class="option-item form-column-item">
        <v-optional-editor label="分类名称" labelValue="YED" :type="type!=undefined && 'input'">
        </v-optional-editor>
      </div>
      <div class="option-item form-column-item" style="height:auto;">
        <div class="more-input" v-if="type!=undefined">
          <v-form-item label="备注" style="padding-top:10px;">
            <v-input type="textarea" style="width:300px;height:100px;"></v-input>
          </v-form-item>
        </div>
        <v-optional-editor v-else label="备注" labelValue="YED">
        </v-optional-editor>
      </div>
    </div>
    <div class="bottom-btn" v-if="type!=undefined">
      <v-button type="primary" size="small">确定</v-button>
      <v-button type="green" size="small">重置</v-button>
      <v-button type="warn" size="small" @on-click="handleGoBack">返回</v-button>
    </div>
    <div class="bottom-btn" v-else>
      <v-button type="primary" size="small" @on-click="handleRouterGo(path+'?type=1')">编辑</v-button>
      <v-button type="green" size="small">删除</v-button>
      <v-button type="warn" size="small" @on-click="handleGoBack">返回</v-button>
    </div>
  </Card>

</template>

<script>
  import routeMixin from '../../../mixins/routeMixin'
  export default {
    mixins:[routeMixin],
    data(){
      return {
        path: this.$route.path,
      }
    },
    computed: {
      type(){
        return this.$route.query.type;
      }
    },
    methods: {
      handleRouterGo( path ){
        this.$router.push( path );
      }
    }
  }
</script>

<style lang="less">
  .gdfl-optional-editor {
    .option-item {
      width: 80%;
    }
    .more-input {
      line-height: 0;
      padding-bottom:10px;
      .v-form-label {
        vertical-align: top;
        line-height: 0;
        margin-top: 5px;
      }
    }
  }
</style>
